<template>
    <!-- 详情页 -->
    <div class="detail">
        <header>
            <van-icon @click="goBack" size="30" color="#333" name="arrow-left" />
        </header>
        <img :src="arr.photo_path" alt="">
        <div class="content">
            <h4>{{ arr.title }}</h4>
            <p>精品 · 独家 · 浏览<span>{{ arr.vc }}</span> · 收藏<span>{{ arr.views_count_text }}</span></p>
            <div class="user-info">
                <div class="user-name">
                    <div>
                        <!-- 头像 -->
                        <img :src="arr.user.user_photo" :alt="arr.user.user_photo">
                    </div>
                    <div class="u-n-r">
                        <span>{{ arr.user.nickname }}</span>
                        <i>LV.{{ arr.user.lvl }}</i>
                    </div>
                </div>
                <div class="attent">关注
                </div>
                <!-- <div @click="toggleActivities()" :class="'attent' + (item.isActivities ? 'active' : '')">关注
                </div> -->
            </div>
        </div>
        <section>
            <div class="intro">
                <div><img :src="arr.cook_time_image" :alt="arr.cook_time_image"><span>{{ arr.cook_time
                        }}</span></div>
                <div><img :src="arr.cook_difficulty_image" :alt="arr.cook_difficulty_image"><span>{{
                    arr.cook_difficulty }}</span></div>
            </div>
            <div class="food_list_title">
                <h5>食材清单</h5>
                <p>加入采购清单</p>
            </div>
            <div class="food_list">
                <div v-for="(item, index) in arr.major" :key="index" class="food_item">
                    <div class="food_item_title">{{ item.title }}</div>
                    <div class="food_item_note">{{ item.note }}</div>
                </div>
            </div>
            <div class="cook_step">
                <h5>烹饪步骤</h5>
                <div v-for="(item, index) in arr.cookstep" :key="index" class="cook_step_item">
                    <p>步骤{{ item.position }}/{{ arr.cookstep.length }}</p>
                    <div class="cook_step_item_image">
                        <img :src="item.image" :alt="item.image">
                    </div>
                    <div class="cook_step_item_content">{{ item.content }}</div>
                </div>
            </div>
            <div class="time">
                <p>{{ arr.release_time }}</p>
            </div>
        </section>

    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            arr: [
                // {
                //     cook_id: 0,
                //     img_title: 'https://i1.douguo.com/upload/caiku/5/7/8/yuan_57ed4779bfe0248ebc94043834d9b688.jpg',
                //     title: '香辣小酥肉',
                //     price: 12,
                //     v_c: 47317,
                //     views_count_text: "4.7万",
                //     user: {
                //         user_id: 1,
                //         user_photo: 'http://tx1.douguo.net/upload/photo/6/4/d/70_u06423745250689164427.jpg',
                //         user_name: "小食坊damg",
                //         lvl: 4,
                //     },
                //     cook_time: "10~30分钟",
                //     cook_difficulty: "切墩(初级)",
                //     cook_time_image: "https://i1.douguo.com/upload/note/a/c/3/acc2dde3b367bfff7fe086d45077b7a3.png",
                //     cook_difficulty_image: "https://i1.douguo.com/upload/note/1/8/d/18516d0904b76e46d2804aede541477d.png",
                //     major: [
                //         {
                //             title: "鸡胸肉",
                //             note: "300g",
                //         },
                //         {
                //             title: "鸡蛋",
                //             note: "2个",
                //         },
                //         {
                //             title: "玉米淀粉",
                //             note: "50克",
                //         },
                //         {
                //             title: "胡椒粉",
                //             note: "少许",
                //         },
                //         {
                //             title: "椒盐",
                //             note: "少许",
                //         },
                //         {
                //             title: "辣椒粉",
                //             note: "半勺",
                //         },
                //         {
                //             title: "食用油",
                //             note: "适量",
                //         },
                //         {
                //             title: "生抽",
                //             note: "1勺",
                //         },
                //         {
                //             title: "料酒",
                //             note: "1勺",
                //         },
                //         {
                //             title: "盐",
                //             note: "少许",
                //         }
                //     ],
                //     cookstep: [
                //         {
                //             position: "1",
                //             content: "准备食材",
                //             image: "https://i1.douguo.com/upload/caiku/e/9/9/800_e9153058cf670caa19f43c5d45cb0a19.jpg",
                //         },
                //         {
                //             position: "2",
                //             content: "鸡胸肉切成一厘米的长条",
                //             image: "https://i1.douguo.com/upload/caiku/9/2/4/800_92ef6b3fb89e88422d9c51d35410c044.jpg",
                //         },
                //         {
                //             position: "3",
                //             content: "加入半勺盐",
                //             image: "https://i1.douguo.com/upload/caiku/e/f/6/800_ef497a4883bb7b6a9e88818ded3362e6.jpg",
                //         },
                //         {
                //             position: "4",
                //             content: "少许黑胡椒粉",
                //             image: "https://i1.douguo.com/upload/caiku/8/4/7/800_84b2ec1dd1f3620c53a27bfb0a1a5967.jpg",
                //         },
                //         {
                //             position: "5",
                //             content: "1勺生抽",
                //             image: "https://i1.douguo.com/upload/caiku/3/c/8/800_3c2171ddc34e64895a77ffc59e754b28.jpg",
                //         },
                //         {
                //             position: "6",
                //             content: "1勺料酒",
                //             image: "https://i1.douguo.com/upload/caiku/4/f/2/800_4fde5466b84dafdbff3efbba75d20912.jpg",
                //         },
                //         {
                //             position: "7",
                //             content: "然后搅拌均匀，腌制15分钟",
                //             image: "https://i1.douguo.com/upload/caiku/b/8/9/800_b8e5d8377f0f3a7be3a8a14b7dc26169.jpg",
                //         },
                //         {
                //             position: "8",
                //             content: "准备面糊：2个鸡蛋，小半碗玉米淀粉，搅拌均匀",
                //             "image": "https://i1.douguo.com/upload/caiku/6/3/b/800_632c421f668259fac75ee7a829ebf4cb.jpg",
                //         },
                //         {
                //             position: "9",
                //             content: "再倒入鸡胸肉中，一起搅拌均匀备用",
                //             image: "https://i1.douguo.com/upload/caiku/3/e/1/800_3eb65882837433f4b46d1f81485d52c1.jpg",
                //         },

                //         {
                //             position: "10",
                //             image: "https://i1.douguo.com/upload/caiku/f/4/9/800_f4c4daefffcb9fa5b460238bfec393f9.jpg",
                //             content: "锅中倒入适量油，油温六成热，倒入裹上面糊的鸡胸肉，注意期间要不停的搅拌，防止粘锅",
                //         },
                //         {
                //             position: "11",
                //             image: "https://i1.douguo.com/upload/caiku/d/a/2/800_daeb8c5b470b33d7d395fc52c60830c2.jpg",
                //             content: "炸至两面金黄，再复炸一次即可",

                //         },
                //         {
                //             position: "12",
                //             image: "https://i1.douguo.com/upload/caiku/e/e/5/800_ee9c7cd7d93aa61711be1481786e0635.jpg",
                //             content: "倒入锡纸中，吸干多余的油分",
                //         },
                //         {
                //             position: "13",
                //             image: "https://i1.douguo.com/upload/caiku/6/d/2/140_6df39f07cdfc21560ca5da29c81d7882.jpg",
                //             content: "最后撒上辣椒粉或者孜然粉，贼好吃~",
                //         }
                //     ],
                //     release_time: "发布于 2021-11-11",

                // }
            ]
        }
    },
    methods: {
        goBack() {
            setTimeout(() => {
                this.$router.go(-1);
            }, 100);
        },
        // toggleActivities() {
        //     item.isActivities = !item.isActivities;
        // },
        async getActivities() {
            let { id } = this.$route.params;
            console.log(id);
            axios.get(`https://apis.netstart.cn/douguo/recipe/detail/${id}`)
                .then(res => {
                    let { data } = res;
                    if (data.state === "success") {
                        this.arr = data.result.recipe;
                    }
                    console.log(this.arr);
                })
                .catch(err => {
                    console.log(err);
                });
        }
    },

    created() {
        this.getActivities();
    }
}



</script>

<style lang="less">
@import url(../common/less/varible.less);

.detail {
    width: 100%;

    header {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: rgba(254, 67, 13, .1);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }

    img {
        width: 100%;
    }

    .content {
        width: 100%;
        padding: @pad;

        h4 {
            padding: 10px 0;
        }

        p {
            font-size: 14px;
            color: #969090;
        }

        .user-info {
            display: flex;
            width: 100%;
            height: 30px;
            justify-content: space-between;
            align-items: center;
            // background-color: skyblue;
            margin-bottom: 8px;
            margin-top: 25px;

            .user-name {
                // background-color: red;
                height: 30px;
                display: flex;
                align-items: center;

                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    vertical-align: middle;
                }

                .u-n-r {
                    padding-left: 5px;
                    width: 100%;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    padding-top: 3px;
                    span {
                        display: inline-block;
                        font-size: 12px;
                        vertical-align: middle;
                    }

                    i {
                        display: inline-block;
                        // vertical-align: middle;
                        font-size: 8px;
                        font-weight: bold;
                        font-family: Arial, Helvetica, sans-serif;
                        color: #dfba54;
                        margin-left: 5px;
                    }

                    p {
                        color: #8b8a8a;
                        font-size: 11px;
                        padding-top: 1px;
                    }
                }
            }

            .attent {
                width: 50px;
                height: 20px;
                background-color: @bgColor;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
                border-bottom-left-radius: 15px;
                border-bottom-right-radius: 15px;
                text-align: center;
                line-height: 20px;
                color: #f9f6f6;
                font-size: 11px;
            }

        }

    }

    section {
        padding: 10px 0 5px 0;

        .intro {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 16px;

            img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
            }

            span {
                display: inline-block;
                vertical-align: middle;
            }
        }

        .food_list_title {
            margin-top: 30px;
            padding: @pad;
            display: flex;
            align-items: center;
            justify-content: space-between;

            h5 {
                font-size: 18px;
            }

            p {
                font-size: 12px;
                color: @fontColor;
            }
        }

        .food_list {
            font-size: 15px;
            padding: @pad;
            margin-top: 15px;
            margin-bottom: 10px;

            .food_item {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 5px 0;
            }
        }

        .cook_step {
            margin-top: 30px;
            padding: @pad;

            h5 {
                font-size: 18px;
            }

            .cook_step_item {
                margin-top: 10px;
                margin-bottom: 10px;

                p {
                    margin: 15px 0 5px 0;
                    font-size: 16px;
                }
            }

            .cook_step_item_image {
                width: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .cook_step_item_content {
                width: 100%;
                font-size: 14px;
                padding-top: 10px;
            }
        }

        .time {
            font-size: 12px;
            color: #969090;
            padding: @pad;
            margin-top: 10px;
            margin-bottom: 50px;

        }
    }
}
</style>